<template>
  <el-container>
    <div class="right-panel">
      <div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
        <div class="panel-search-box" style="width: 200px">
          <span class="demonstration" style="margin-left: 10px">片区:</span>
          <el-select v-model="search.area" placeholder="全国" style="width: 150px" filterable clearable
            @change="areaChange">
            <el-option v-for="item in areaList" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="panel-search-box" style="width: 260px">
          <span class="demonstration" style="margin-left: 10px">品种:</span>
          <el-select v-model="search.productSpec" placeholder="全部" style="width: 210px" filterable clearable
            @change="specChange">
            <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </div>
        <div class="panel-search-box">
          <span class="demonstration" style="margin: 0 10px">计划月份:</span>
          <el-date-picker v-model="planCode" type="month" disabled style="width: 150px"></el-date-picker>
        </div>
        <div class="panel-search-box">
          <el-button type="primary" style="width: 100px; margin-left: 10px" @click="upsearch">查询</el-button>
          <el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px"
            @click="inveDistribution">本月供货数</el-button>
          <el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px"
            @click="saleDistribution">特殊调整</el-button>
        </div>
        <el-popover placement='left' :width="300" trigger="hover">
          <!-- <p>1、10月配额数量</p>
          <p>2、10月配额</p>
          <p>3、预计9月底库存(万)</p>
          <p>4、预计10月纯销(万)</p>
          <p>5、预计10月底库存(万)</p>
          <p>6、预计10月底库存周转</p> -->
          <p>分货原则：</p>
          <p>1、主要原则:库存周转</p>
          <p>（举例分配1月配额）计算公式：</p>
          <p>
            12月渠道库存 + 1月配额 -
            1月预计纯销=1月底渠道库存（平均纯销*统一库存周转）
            当供货>需求，统一库存周转为常规品种周转管理要求，比如2个月或者2.5个月；
            当供货>需求，根据供货倒推出各片区保持统一的库存周转；
          </p>
          <p>2、其他原则：增长率、规模占比</p>
          <p>
            特殊情况下考虑的原则，主要应用于感冒灵等较大规模品种，按照供货情况，将一部分货源按照片区的增长率和规模占比分配；
          </p>


          <template #reference>
            <el-icon color="#f5a21d" style="margin-left: 100px; vertical-align: middle; font-size: 24px">
              <QuestionFilled />
            </el-icon>
          </template>
        </el-popover>

        <!-- <el-tooltip
          class="box-item"
          effect="dark"
          content="1、10月配额数量
								 2、10月配额
								 3、预计9月底库存（万）
                                 4、预计10月纯销（万）
                                 5、预计10月月底库存（万）
                                 6、预计10月月底库存周转"
          placement="bottom-end"
        >
          <el-icon color="#f5a21d" style="margin-left: 100px; vertical-align: middle; font-size: 24px"
            ><QuestionFilled
          /></el-icon>
        </el-tooltip> -->
      </div>
      <div class="search-box">
        <div class="panel-search-box" style="margin-bottom: 10px">
          <scFileImport ref="scFileImport" :apiObj="importApi" :maxSize="30" hideButton @success="handleImportSuccess">
          </scFileImport>
          <!--					<el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px" @click="inveDistribution"-->
          <!--						>本月供货数</el-button-->
          <!--					>-->
          <!--					<el-button type="primary" :disabled="adjustDisabled" style="margin-left: 10px" @click="saleDistribution"-->
          <!--						>特殊调整</el-button-->
          <!--					>-->
        </div>
      </div>
    </div>
    <el-header style="display: none"></el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" :params="params" border :pageSize="24" stripe remoteSort remoteFilter
        @dataChange="dataChange">
        <el-table-column label="品种" prop="productSpec" align="center"></el-table-column>
        <el-table-column label="区域" prop="area" align="center"></el-table-column>
        <el-table-column :label="`${planCurMonth}月配额数量`" prop="planNextQuotaNum" align="center"></el-table-column>
        <el-table-column :label="`${planCurMonth}月配额（万）`" prop="planNextQuota" align="center"></el-table-column>


        <el-table-column :label="`预计${planLastMonth}月底库存（万）`" prop="planThisMonthStock"
          align="center"></el-table-column>


        <el-table-column :label="`预计${planCurMonth}月纯销（万）`" prop="planNextSale" align="center"></el-table-column>
        <el-table-column :label="`预计${planCurMonth}月底库存（万）`" prop="planNextMonthStock" align="center"></el-table-column>
        <el-table-column :label="`预计${planCurMonth}月底库存周转`" prop="turnoverString" align="center"></el-table-column>
      </scTable>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'plan',
  data() {
    return {
      dialog: {
        info: false
      },
      areaList: [], //片区列表
      productSpecList: [], //品种列表
      search: {
        area: '', //片区
        productSpec: '' //品种
      },
      apiObj: this.$API.plan.getPlan,
      params: {
        area: '', //片区
        productSpec: '' //品种
      },
      planCode: '', //计划年月
      planLastMonth: '', //计划年月-上月月份
      planCurMonth: '', //计划年月-当月月份
      importApi: this.$API.plan.importStockTurnover,
      adjustDisabled: false //禁止分货
    }
  },
  created() {
    this.getArea()
    this.getProductSpec()
  },
  methods: {
    areaChange(value) {
      if (!value) {
        this.search.area = ''
        this.upsearch()
      } else {
        let obj = this.areaList.find((item) => item.id === value)
        this.search.area = obj.label
      }
    },
    specChange(value) {
      if (!value) {
        this.search.productSpec = ''
        this.upsearch()
      }
    },
    //获取片区列表
    async getArea() {
      let res = await this.$API.plan.areas.get()
      res.data[0].children.forEach((item) => {
        if (item.children.length > 0) {
          this.areaList.push(...item.children)
        } else {
          this.areaList.push(item)
        }
      })
    },
    //获取品种列表
    async getProductSpec() {
      let res = await this.$API.plan.productList.get()
      this.productSpecList = res.data
    },
    dataChange(data) {
      if (data.code == 0 && data.data.length > 0) {
        this.planCode = data.data[0].planCode.toString()
        let month = this.planCode.substring(4)
        this.planLastMonth = Number(month) - 1 == 0 ? 12 : Number(month) - 1
        this.planCurMonth = Number(month)
        this.adjustDisabled = false
      } else {
        this.adjustDisabled = true
      }
    },
    //按库存周转分货
    inveDistribution() {
      this.$refs.scFileImport.open()
    },
    //按纯销规模分货
    saleDistribution() {
      this.$router.push('/distributionGoods/plan/adjust')
    },
    // 导入成功后
    handleImportSuccess(res, close) {
      this.$message.success('文件上传成功，配额已刷新！')
      close()
      this.$refs.table.upData()
    },
    //查询
    upsearch() {
      this.$refs.table.upData(this.search)
    }
  }
}
</script>

<style>
.header-btn-item {
  display: flex;
}
</style>
